<template>
  <div class="app-container">
    <div class="sidebar" :class="{ 'is-collapsed': menuStore.isCollapse }">
      <sidebar-menu />
    </div>
    <div class="main-content">
      <breadcrumb />
      <div class="page-container">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import SidebarMenu from '@/components/SidebarMenu/SidebarMenu.vue';
import Breadcrumb from '@/components/PageHeader/Breadcrumb.vue';
import { useMenuStore } from '@/store/modules/menu';

// 获取菜单状态
const menuStore = useMenuStore();
</script>

<style lang="scss" scoped>
.app-container {
  display: flex;
  height: 100%;
  width: 100%;
}

.sidebar {
  width: var(--sidebar-width, 180px);
  height: 100%;
  background-color: var(--theme-menu-bg);
  transition: width 0.3s ease;
  overflow: hidden;
  user-select: none;
  &.is-collapsed {
    width: 64px;
  }
}

.main-content {
  flex: 1;
  height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  padding: 0 10px;
  transition: padding-left 0.3s ease;
}

.page-container {
  flex: 1;
  background-color: var(--theme-module-bg);
  border-radius: 4px;
  overflow: auto;

  /* 隐藏滚动条但保持滚动功能 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */

  &::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
}
</style>
